<!-- 生产管理 产品工艺路线 -->
<template>
  <el-dialog title="工艺复制" custom-class="processReplicationDialog" append-to-body :visible.sync="processDialogVisible" :fullscreen="true" @close="closeDialog">
    <div class="crud-container">
      <avue-crud
        class="leftArea"
        ref="sourceTable"
        :table-loading="loading"
        :search.sync="sourceOption.search"
        :data="sourceData"
        :page.sync="page"
        :option="sourceOption"
        @selection-change="handleSourceSelectionChange"
        @search-change="handleSourceSearchChange"
        @search-reset="handleSourceSearchReset"
        @on-load="onLoad"
      >
      </avue-crud>
      <div class="button-container">
        <el-button class="btn" @click="moveRight" icon="el-icon-arrow-right"></el-button>
        <el-button class="btn" @click="moveLeft" icon="el-icon-arrow-left"></el-button>
      </div>
      <avue-crud class="rightArea" ref="targetTable" :data="targetData" :option="targetOption" @selection-change="handleTargetSelectionChange"> </avue-crud>
    </div>
    <div slot="footer" class="avue-dialog__footer">
      <el-button size="small" icon="el-icon-circle-close" @click="processDialogVisible = false">取消</el-button>
      <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="processReplicationSubmit" v-preventReClick>保存</el-button>
    </div>
    <!-- 产品编码 弹框 -->
    <common-modal-template ref="commonModalTemplate" :option="tableOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"> </common-modal-template>
    <global-modal-template :visibile.sync="visibile" :option="tableOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"> </global-modal-template>
  </el-dialog>
</template>

<script>
import { getCopyList, copy } from '@/api/product/productrouteManage';
import GlobalModalTemplate from '@/components/common-modal-template/global-modal-template.vue';
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template.vue';
import userTableConfig from '@/components/user-table-config';
import userConfig from '@/mixins/userConfig';
export default {
  components: {
    CommonModalTemplate,
    GlobalModalTemplate,
    userTableConfig
  },
  mixins: [userConfig()],
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      processId: null,
      processDialogVisible: false,
      filterForm: {
        productPartNo: '',
        productPartName: '',
        status: ''
      },
      sourceOption: {
        height: 'calc(100vh - 300px)',
        border: true,
        stripe: true,
        tip: false,
        selection: true,
        addBtn: false,
        menu: false,
        searchShow: true,
        searchLabelWidth: 100,
        searchMenuSpan: 12,
        searchMenuPosition: 'right',
        refreshBtn: false,
        columnBtn: false,
        search: {},
        column: [
          {
            label: '产品编码',
            prop: 'productPartNo',
            search: true,
            searchSpan: 12
          },
          { label: '产品名称', prop: 'productPartName', searchSpan: 12, search: true },
          { label: '产品型号', prop: 'productPartModel' },
          {
            label: '工艺路线状态',
            prop: 'status',
            search: true,
            type: 'select',
            searchSpan: 12,
            dicData: [
              {
                label: '未设计',
                value: 1
              },
              {
                label: '待审核',
                value: 2
              },
              {
                label: '已发布',
                value: 3
              }
            ],
            html: true,
            formatter: (val) => {
              if (val.status == 3) {
                return '<span style="color:#70b603">已发布</span>';
              } else if (val.status == 2) {
                return '<span style="color:blue">待审核</span>';
              } else {
                return '<span style="color:red">未设计</span>';
              }
            }
          }
        ]
      },
      sourceData: [],
      targetOption: {
        height: 'calc(100vh - 300px)',
        border: true,
        stripe: true,
        tip: false,
        selection: true,
        addBtn: false,
        menu: false,
        column: [
          { label: '产品编码', prop: 'productPartNo' },
          { label: '产品名称', prop: 'productPartName' },
          { label: '产品型号', prop: 'productPartModel' },
          {
            label: '工艺路线状态',
            prop: 'status',
            type: 'select',
            dicData: [
              {
                label: '未设计',
                value: 1
              },
              {
                label: '待审核',
                value: 2
              },
              {
                label: '已发布',
                value: 3
              }
            ],
            html: true,
            formatter: (val) => {
              if (val.status == 3) {
                return '<span style="color:#70b603">已发布</span>';
              } else if (val.status == 2) {
                return '<span style="color:blue">待审核</span>';
              } else {
                return '<span style="color:red">未设计</span>';
              }
            }
          }
        ]
      },
      targetData: [],
      selectedSourceRows: [],
      selectedTargetRows: [],
      form: {},
      query: {},
      defaults: {},
      loading: true,
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      data: [],
      commonDialog: {
        dispatch: true
      },
      modalName: '', //打开公用模态框名称
      tableOption: {}, //公用模态框配置信息
      timer: new Date().getTime() //不同内容使用同一个模态框结构，key值不同需要重新请求渲染数据，否则会请求到上一个使用的数据内容
    };
  },
  watch: {
    visible: {
      handler(value) {
        this.processDialogVisible = value;
      },
      immediate: true
    }
  },
  methods: {
    onLoad(page, params = {}) {
      this.loading = true;
      // this.query.isLastest = true;
      getCopyList(page.currentPage, page.pageSize, Object.assign(params, this.query))
        .then((res) => {
          const data = res.data.data;
          this.page.total = data.total;
          this.sourceData = data.records;
          // this.selectionClear();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    openUserCommonModal(params) {
      let { type } = params;
    },
    // 获取选择的物料模态框行数据
    getSelectedRows(rowData) {
      switch (this.modalName) {
        case 'sourcePartNoModal':
          this.sourceOption.search.productPartNo = this._get(rowData, 'partNo', '');
          this.sourceOption.search.productPartName = this._get(rowData, 'name', '');
          let find = this.sourceData.find((item) => item.partNo == rowData.partNo);
          if (!find) {
            this.sourceData.push({ productPartNo: rowData.partNo, productPartName: rowData.name, productPartModel: rowData.productPartModel, status: rowData.status || '1' });
          }
          break;
        default:
          break;
      }
    },

    handleSourceSearchChange(params, done) {
      console.log(params, 'params');
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    handleSourceSearchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    handleSourceSelectionChange(selection) {
      this.selectedSourceRows = selection;
    },
    handleTargetSelectionChange(selection) {
      this.selectedTargetRows = selection;
    },
    moveRight() {
      if (this.selectedSourceRows.length === 0) {
        this.$message.warning('请选择一条数据进行移动');
        return;
      }
      if (this.selectedSourceRows.some((item) => item.status == 3)) {
        this.$confirm('选择的数据中包含已经设计工艺路线的数据，是否确认到待提交区？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.targetData = [...this.targetData, ...this.selectedSourceRows];
          this.sourceData = this.sourceData.filter((item) => !this.selectedSourceRows.includes(item));
          this.selectedSourceRows = [];
        });
      } else {
        this.targetData = [...this.targetData, ...this.selectedSourceRows];
        this.sourceData = this.sourceData.filter((item) => !this.selectedSourceRows.includes(item));
        this.selectedSourceRows = [];
      }
    },
    moveLeft() {
      if (this.selectedTargetRows.length === 0) {
        this.$message.warning('请选择一条数据进行移除');
        return;
      }
      this.sourceData = [...this.sourceData, ...this.selectedTargetRows];
      this.targetData = this.targetData.filter((item) => !this.selectedTargetRows.includes(item));
      this.selectedTargetRows = [];
    },
    processReplicationSubmit() {
      let data = this.targetData.map((item) => {
        return {
          name: item.name,
          code: item.code,
          productPartId: item.productPartId,
          productPartNo: item.productPartNo,
          productPartName: item.productPartName,
          remark: item.remark
        };
      });
      console.log(this.processId, this.targetData);
      // 提交逻辑
      copy(this.processId, this.targetData)
        .then(() => {
          this.processDialogVisible = false;
          this.$message.success('复制成功');
          this.$emit('copySuccess');
        })
        .catch(() => {});
    },
    closeDialog() {
      this.$emit('update:visible', false);
    },
    // 重新加载公用表格弹窗组件
    newKey() {
      this.timer = new Date().getTime();
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .productrouteManageDialog .el-dialog__body {
  max-height: 75vh;
  overflow: auto;
  padding: 0 20px;
  .avue-form__menu {
    display: none;
  }
  .avue-crud__menu {
    display: none;
  }
}
::v-deep .importRow {
  background-color: #95f204 !important;
}

::v-deep .processReplicationDialog {
  .crud-container {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    .avue-crud__menu {
      display: none;
    }
    .leftArea {
      width: 45%;
    }
    .button-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0 10px;
      .btn {
        background-color: #409eff;
        color: #fff;
        &.is-disabled {
          background-color: #fff !important;
          color: #ccc !important;
        }
        &:last-child {
          margin-left: 0;
        }
      }
    }
    .rightArea {
      width: 45%;
    }
  }
}
</style>
